<template>
  <div class="info-card-outer" :style="defaultStyle" :class="isActiveClass">
    <div class="info-card-container" :style="contentStyle">
      <div class="info-card-wrapper" v-if="contentData.layout === 'row-2'">
        <div
          class="info-card-item"
          v-for="(item, index) in contentData.default_sub_list"
          :key="item.id"
          :style="[itemStyle(item), { height: infoHeight + 'px' }]"
        >
          <img :src="item.imgUrl" @load="onImageLoad(index, $event)" style="display: none" />

          <div class="info-card-text">
            <div class="title" :style="titleStyle">{{ item.title }}</div>
            <div class="desc" :style="descStyle">{{ item.desc }}</div>
          </div>
        </div>
      </div>

      <div class="info-card-wrapper-layout2" v-if="contentData.layout === 'left-one-right-two'">
        <div
          class="left"
          v-if="contentData.default_sub_list[0]"
          :style="{ height: infoHeight + 'px' }"
        >
          <div class="info-card-item" :style="itemStyle(contentData.default_sub_list[0])">
            <img
              :src="contentData.default_sub_list[0].imgUrl"
              @load="onImageLoad(0, $event)"
              style="display: none"
            />
            <div class="info-card-text">
              <div class="title" :style="titleStyle">{{
                contentData.default_sub_list[0].title
              }}</div>
              <div class="desc" :style="descStyle">{{ contentData.default_sub_list[0].desc }}</div>
            </div>
          </div>
        </div>
        <div class="right">
          <div
            class="info-card-item"
            v-for="(item, index) in contentData.default_sub_list.slice(1, 3)"
            :key="item.id || index"
            :style="itemStyle(item)"
          >
            <div class="info-card-text">
              <div class="title" :style="titleStyle">{{ item.title }}</div>
              <div class="desc" :style="descStyle">{{ item.desc }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String
    }
  })

  const infoHeight = ref(136)

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const contentStyle = computed(() => {
    const s = props.contentData.style
    return {
      borderRadius: s.borderRadius,
      backgroundColor: s.backgroundColor
    }
  })

  const titleStyle = computed(() => {
    const s = props.contentData.titleStyle || {}
    return {
      fontSize: s.fontSize ? s.fontSize + 'px' : '15px',
      color: s.color,
      fontWeight: s.fontWeight === 0 ? 'normal' : s.fontWeight
    }
  })

  const descStyle = computed(() => {
    const s = props.contentData.descStyle || {}
    return {
      fontSize: s.fontSize ? s.fontSize + 'px' : '12px',
      color: s.color,
      fontWeight: s.fontWeight === 0 ? 'normal' : s.fontWeight
    }
  })

  function itemStyle(item: any) {
    return {
      backgroundImage: `url(${item.imgUrl})`,
      backgroundSize: 'cover',
      backgroundRepeat: 'no-repeat'
    }
  }

  function onImageLoad(index: number, event: Event) {
    if (index === 0) {
      const img = event.target as HTMLImageElement
      const naturalWidth = img.naturalWidth
      const naturalHeight = img.naturalHeight

      const displayWidth = 175
      const scale = displayWidth / naturalWidth
      const scaledHeight = Math.round(naturalHeight * scale)

      infoHeight.value = scaledHeight
    }
  }
</script>

<style scoped lang="scss">
  //.info-card-outer {
  //}

  .info-card-container {
    padding: 8px;
    position: relative;
    z-index: 2;

    .info-card-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;

      .info-card-item {
        background: #f8f9fb;
        border-radius: 8px;
        display: flex;
        align-items: center;
        width: calc((100% - 8px) / 2);
        padding: 12px;
        box-sizing: border-box;

        .info-card-text {
          display: flex;
          flex-direction: column;

          .desc {
            margin-top: 8px;
          }
        }
      }
    }

    .info-card-wrapper-layout2 {
      display: flex;
      gap: 12px;

      .left {
        flex: 1;

        .info-card-item {
          height: 100%;
        }
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;

        .info-card-item {
          flex: 1;
        }
      }

      .info-card-item {
        background: #f8f9fb;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        padding: 12px;
        box-sizing: border-box;

        .info-card-text {
          display: flex;
          flex-direction: column;

          .desc {
            margin-top: 4px;
          }
        }
      }
    }
  }

  .active-component {
    border: 1px solid var(--el-color-primary);
  }
</style>
